<template>
	<div id="moviePage"
		v-if="detailMovie.length!=0"
		>
		
		<!--这是MIntUI 的 loading样式-->
		<mt-spinner v-if="isLoading==true" type="fading-circle" class="loading" :size="60" color="#2096ef"></mt-spinner>
		
		<!--<div @click="count++">++++</div>
	
		{{count}}-->
		<div class="detail_box">
			
		<div class="gray"></div>
		<div class="zhezao" :style="{'background-image':`url( ${picFix(detailMovie.img)} )`}"></div><div class="detail" >
		
			
			
			<div class="detail_img" >
				<img v-lazy="picFix(detailMovie.img)"/>
			</div>
			<div class="detail_content" >
				<h1>{{detailMovie.nm}}</h1>
				<h6>{{detailMovie.enm}}</h6>
				<h2 class="wish" v-if="detailMovie.globalReleased==false">{{detailMovie.wish}}人想看</h2>
				<h2 v-else-if="detailMovie.sc!==0"><i style="font-size: 18px; color: #fc0;">{{detailMovie.sc}}</i>&nbsp;&nbsp;({{detailMovie.snum}}万人评)</h2><h2 v-else>暂无评分</h2>
				<h3>{{detailMovie.cat}} <span><img src="../img/imax.png"/></span></h3>
				<h4>{{detailMovie.src}}/{{detailMovie.dur}}分钟</h4>
				<h5>{{detailMovie.pubDesc}}</h5>
			</div>
			<div class="detail_more">></div>
		</div>
		
		</div>
		
	<div class="movie_date"	v-if="dates.length!=0">
		<ul>
			<li	
				:class="{choose:d.date == day,first:n==0&&into==true}"		
				v-for="(d,n) in dates"
				@click="choose_date(d.date)"
				>{{d.date}}</li>	<!--判断当前li的日期是否跟今天的日期一致-->
		</ul><!--	点击的时候，把日期改成d.date一样，然后请求的时候也是用改完的day再次请求选中的那天的数据		-->
		
			
		
	
	</div>	
	
	<div class="cinema_nav">
		<div>    全城    ▼</div>
		<div>    品牌    ▼</div>
		<div>    特色    ▼</div>
	</div>
		
		
<!-- 遍历所得的 影院信息-->		
	<ul class="cinema_box"
			infinite-scroll-disabled="open"
			v-infinite-scroll="loadMore" 
		  	infinite-scroll-distance="2"
	  	>	<!--mint UI库 滚动条参数-->
  	
		<li v-for="(cinema,n) in cinemas"
			class="cinema"
			@click="toAbout(cinema.id,cinema.nm)">
			<h1><span>{{cinema.nm}}</span> <span class="price">{{cinema.sellPrice}}</span> <span class="q">元起</span></h1>
			<div class="h2_flex"><h2>{{cinema.addr}}</h2><h2>{{cinema.distance}}</h2></div>
			<h3>
				<span class="allowRefund" v-if="cinema.tag.allowRefund==1">退</span>
				<span class="endorse" v-if="cinema.tag.endorse==1">改签</span>
				<span class="snack" v-if="cinema.tag.snack==1">小吃</span>
				<span class="vipTag">折扣卡</span> 
				<span v-for="ting in cinema.tag.hallType"
						class="hallType"
					>{{ting}}</span>
			</h3>
			<h4 v-if="cinema.promotion.cardPromotionTag"><span><img src="../img/卡.png"/></span>&nbsp;{{cinema.promotion.cardPromotionTag}}</h4>
			<h5>近期场次：{{cinema.showTimes}}</h5>
		</li>
	</ul>
		
		
		
	</div>
	
</template>

<style lang="scss">
img[lazy=loading] {
  width: 40px;
  height: 40px;
  margin-left: 35px;
  margin-top: 50px;
}
</style>
<script type="text/javascript">
	import qs from 'qs';
	
	export default {
		
		created(){
			// 获取今天日期
			this.day = this.today();
			
			this.id=this.$route.params.movieId;
			// 电影详情
			this.axios.get('/ajax/detailmovie',{
				params:{
					movieId:this.id
				}
				}).then(
					(res)=>{
						
//						console.log('created---res.data.detailMovie:',res.data.detailMovie); 
				this.detailMovie=res.data.detailMovie;
				
//				console.log(this.$store.state.headerTitle)
				// 提交修改
				this.$store.commit('changeHT',this.detailMovie.nm)
				
			})
			
			// 影院信息
			this.getCinemas(this.day,0)
								//today方法解决日期的动态问题
								
								
								
		},
		
		data(){
			return{
				id:'',ischoose:true,open:true,
				detailMovie:{},
				cinemas:[],
				offset:0,
				dates:[],//showDate
				day:'',			// 选中某天
				count:0,
				into:true,//日期第一个li默认选中
				isLoading:false,//加载的样式是否显示
				cinemaTotal:'',//电影院数据总数
				arriveBottom:false,//是否没有更多数据了
			}
		},
		
		methods:{
			today(){
				let d = new Date();
				let year = d.getFullYear();
				let month= d.getMonth()+1;
				let day  = d.getDate();
				return year + '-' + month + '-' + day;
			},
			choose_date(d){
				this.into=false;// 取消第一个日期默认选中的效果类
				this.day=d  // 用来启动 选中样式
				// 选择日期再次请求
				this.axios.post('/ajax/movie',qs.stringify({
						movieId:this.id,
						day:d,
						offset:0,
						limit:20,
						districtId:-1,
						lineId:-1,
						hallType:-1,
						brandId:-1,
						serviceId:-1,
						areaId:-1,
						stationId:-1,
						item:"",
						updateShowDay:true,
						reqId:1545411315305,
						cityId:20,
						}
					) ).then( (res)=>{
						this.cinemas=res.data.cinemas;
						console.log( "c",res.data.cinemas);
									} )
			},
			// 修改图片尺寸
  				picFix(url){
  					url=String(url)
  				 return	url.replace('w.h','110.150')
  				},
  				
  		getCinemas(day,offset){
  			// 请求影院信息
				this.axios.post('/ajax/movie',qs.stringify({
						movieId:this.id,
						day:day,
						offset:offset,
						limit:20,
						districtId:-1,
						lineId:-1,
						hallType:-1,
						brandId:-1,
						serviceId:-1,
						areaId:-1,
						stationId:-1,
						item:"",
						updateShowDay:true,
						reqId:1545411315305,
						cityId:20,
						}
					) ).then( (res)=>{
							console.log( "res.data",res.data );
							if(this.cinemaTotal==''){
								this.cinemaTotal=res.data.paging.total;//数据总数
							}
							//判断请求结果，如果影院为空就代表当天无上映，需要再次请求
							if(res.data.cinemas.length !==0){
								//已经上映		
								this.cinemas=this.cinemas.concat(res.data.cinemas);
//									console.log( 1 ); 
								this.open=false// 解决进页面自动触发底部的问题，请求完数据再开 
								this.isLoading=false;
							}else{
								//还没上映
								console.log( '还没上映 ，要再次请求' ); 
								let Future_day = res.data.showDays.dates[0].date;
								this.getCinemas(Future_day,0)
//									console.log( 2 ); 请求是异步  2-3-1-3
							}
//									console.log( 3 ); 
							this.dates=res.data.showDays.dates
							
							
					})
  					
  			},
  			loadMore(){
					if(this.cinemas.length>=this.cinemaTotal){ //判断是否已经没更多的数据可以加载了
							
							if(this.arriveBottom==false){
								//在ul最后加入  “没有更多了” div节点
								var a = document.getElementsByClassName('cinema_box')[0];
								var btm = document.createElement('btm')
								btm.innerHTML=`<div class="nomore">没有更多了...</div>`
								a.appendChild(btm);
								this.arriveBottom=true; // 其实是开关  ，  只新增一次   节点 就不再进来
							}
							return;
					};
					this.open=true;//先关底部加载的开关，请求完数据再开
					this.isLoading=true;
					console.log( '!底部' ); 
					this.offset+=20;
					this.getCinemas(this.day,this.offset)
  					},
  			judge(){
  				console.log( n ); 
  				},
  			toAbout(a,b){	//传当前电影的id 到下一个点击页面
  					a=a.toString()
  					this.$router.push({name:'about',params:{id:this.id,cinema_id:a,name:b}})
  								//跳转并传参
  			},
  				
		}
		
	}
</script>
